iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
Modern Web

Daily UI : 開發者版系列 第 17

Vuetify:File Upload Widget

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/RwbXVaR

Used UI Component ( #3 )

#1 Progress > Linear, #2 Lists, #3 File inputs

UI 圖來源見

Discussion

<v-card-title ...>
    <v-select .../>
    <v-file-input .../>
</v-card-title>

看到這張圖時,套用 FCC 的概念,要怎麼思考呢?最上方像是 Toolbar 的部分確實也可靠 v-toolbar 實現,但元件當然是用越少越好,所以直接把它當作 v-card-title 是相對簡潔的做法。此處特別之處在於,為了做到跟源圖相同,也就是 "點擊上傳按鈕就跳出文件上傳的視窗",我們因此加了少量的客製化 CSS,把 v-file-input 的外觀改到只剩一個 icon( v-file-input 原型,詳見官方文件

客製化 CSS 並不可怕,必要時還是得做,至於說對網頁相容性是否會有影響,那就跟客製化方式有關,此處對 v-file-input 的修改,在概念上剛好與 "添加功能 / styling" 相反,大多做的事情是對其部分外觀隱藏、間距歸零 . . .,這種方式的改動,一般來說對網頁相容性影響不大


上一篇
Vuetify:About Card
下一篇
Vuetify:Google Trend
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言